<template>
    <ul class="_xi_nan_left-menu">
        <router-link tag="li" :to="{ name: item.routerName }" class="menu-item" active-class="menu-item-active"
            v-for="item in menuList" :key="item.routerName">
            <img :src="item.iconActivePath" :alt="item.name" v-if="isRouteActive(item.routerName)">
            <img :src="item.iconPath" :alt="item.name" v-else>
            <span>{{ item.name }}</span>
        </router-link>
    </ul>
</template>
<script>
export default {
    name: "LeftMenu",
    props: {
        // 数组需要的对象格式
        // {
        //     name: '',
        //     routerName: '',
        //     iconPath: require(''),
        //     iconActivePath: require('')
        // }
        menuList: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        //判断是否选中的当前模块
        isRouteActive(moduleName) {
            return this.$route.matched.find(item => item.name == moduleName)
        },
    }
}
</script>
<style scoped lang="scss">
._xi_nan_left-menu {
    width: 65px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    box-sizing: border-box;


    .menu-item {
        writing-mode: vertical-lr;
        cursor: pointer;
        color: RGB(193, 235, 255, .6);
        letter-spacing: 8px;

        img {
            width: 50px;
        }
    }

    .menu-item-active {
        color: #FFF;
    }

    .menu-item+.menu-item {
        margin-top: 40px;
    }
}
</style>